<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
*{
			padding: 0;
			margin: 0;
		}
		.tab{
			width: 600px;
			margin: 100px auto;
/*			background: pink;*/
		}
		.title{
			overflow: hidden;
		}
		.title span{
			float:left;
			width: 200px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border: 1px solid #000;
			box-sizing: border-box;
		}
		.title .active{
			background: orange;
			color: #fff;
		}
		.content p{
			width: 600px;
			/*hiehgt: 200px;
			line-height: 200px;
			text-align: center;*/
			border: 1px solid black;
			box-sizing: border-box;
			display: none;
		}
		.content .select{
			display: block;
			background: white;

		}
	</style>
</head>
<body>
	<div class="tab">
		<div class="title">
			<span class="active"></span>
			<span></span>
			<span></span>
		</div>
		<div class="content">
			<p class="select"></p>
			<p></p>
			<p></p>
		</div>
	</div>
	<script type="text/javascript">
		// 获取标签span
		var spans = document.querySelectorAll("span")
		var ps = document.querySelectorAll("p")
		let obj = {
            "error_code": 0,
            "reason": "Success",
            "result": [
                {"data": {
                    "holiday": "元旦",//假日
                    "ji": "123123破土.安葬.行丧.开生坟.",//忌
                    "shuxiang": "马",//属相
                    "desc": "1月1日至3日放假调休，共3天。1月4日（星期日）上班。",//假日描述
                    "weekday": "星期四",//周几
                    "yi": "123213213订盟.纳采.造车器.祭祀.祈福.出行.安香.修造.动土.上梁.开市.交易.立券.移徙.入宅.会亲友.安机械.栽种.纳畜.造屋.起基.安床.造畜椆栖.",//宜
                    "lunarYear": "甲午年",//纪年
                    "yinli": "十一月十一",//农历
                    "year-month": "2015-1",//年份和月份
                    "date": "2015-1-1"//具体日期
                }
             },
             {
                "data": {
                    "holiday": "元旦",//假日
                    "ji": "1231232323112331破土.安葬.行丧.开生坟.",//忌
                    "shuxiang": "牛",//属相
                    "desc": "1月1日至3日放假调休，共3天。1月4日（星期日）上班。",//假日描述
                    "weekday": "星期四",//周几
                    "yi": "12321321313订盟.纳采.造车器.祭祀.祈福.出行.安香.修造.动土.上梁.开市.交易.立券.移徙.入宅.会亲友.安机械.栽种.纳畜.造屋.起基.安床.造畜椆栖.",//宜
                    "lunarYear": "甲午年",//纪年
                    "yinli": "十一月十二",//农历
                    "year-month": "2015-1",//年份和月份
                    "date": "2015-1-2"//具体日期
                }
            },
            {
                "data": {
                    "holiday": "元旦",//假日
                    "ji": "123213破土.安葬.行丧.开生坟.",//忌
                    "shuxiang": "猪",//属相
                    "desc": "1月1日至3日放假调休，共3天。1月4日（星期日）上班。",//假日描述
                    "weekday": "星期四",//周几
                    "yi": "123123订盟.纳采.造车器.祭祀.祈福.出行.安香.修造.动土.上梁.开市.交易.立券.移徙.入宅.会亲友.安机械.栽种.纳畜.造屋.起基.安床.造畜椆栖.",//宜
                    "lunarYear": "甲午年",//纪年
                    "yinli": "十一月十三",//农历
                    "year-month": "2015-1",//年份和月份
                    "date": "2015-1-3"//具体日期
                }
            }
            ]
        }
        console.log(obj)
		for(let i = 0; i < spans.length; i++){
			// 给每一个span标签添加一个点击事件
			spans[i].onclick = function(){
				// 先获取到原来有active类名的给他清空
				document.querySelector(".active").className = ''
				document.querySelector(".select").className = ''
				this.className = 'active'
				ps[i].className = 'select'
			}
			spans[i].innerText = obj.result[i].data.date
			ps[i].innerHTML = `
				<div>${obj.result[i].data.yinli}</div>
				<div>${obj.result[i].data.weekday}</div>
				<div>${obj.result[i].data.yi}</div>
				<div>${obj.result[i].data.ji}</div>
			`
		}
	</script>
</body>
</html>